<template>
  <div class="panel">
    <el-form v-loading="!detailData.dataReady" :model="detailData.statistics" class="demo-form-inline" label-width="100px">

      <el-form-item label="统计时间">
        <el-date-picker v-model="detailData.special.dateRange" value-format="YYYY-MM-DD HH:mm:ss" type="datetimerange" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间" :disabledDate="detailFn.disabledDate"  @change="detailFn.onSubmit"/>
      </el-form-item>

      <el-form-item v-if="detailData.detail.sendAt" label="推送时间">{{detailData.detail.sendAt}}</el-form-item>

      <el-form-item label="送达用户总数">{{detailData.statistics.sendNum}}</el-form-item>
      <el-form-item label="已读用户总数">{{detailData.statistics.isReadNum}}</el-form-item>
      <el-form-item label="已读率">{{detailData.statistics.readRate}}</el-form-item>
    </el-form>
  </div>
  
  
  
</template>

<script setup>
import { reactive, ref, watch, watchEffect } from "vue";
import { getPullMessageStatistics,getPullMessageDetail } from "@/api/operation.js";
import { onBeforeRouteUpdate, useRouter } from "vue-router";
import {ElMessage} from "element-plus"
const router = useRouter();
const params = ref({});
const query = ref({});
watchEffect(()=>{
  params.value = router.currentRoute.value.params;
})
watchEffect(()=>{
  query.value = router.currentRoute.value.query;
})

// 表格功能模块，包括搜索，分页等
const {$data:detailData,$fn:detailFn} = (()=> {
  const backup = {
    query: {
      startAt:"",
      endAt:"",
    },
  };

  const $data = reactive({
    query: { ...backup.query },
    special:{
      dateRange:[],
    },
    detail:{},//详情数据
    statistics:{},//统计数据
    dataReady: false,
  });
  
  const $fn = {
    statistics() {
      $data.dataReady = false;
      getPullMessageStatistics(params.value.id,$data.query).then((res) => {
        // console.log(paramsOPT.id,"res:", res);
        if (res.code === 0) {
          $data.statistics = { ...res.data };
          $data.dataReady = true;
        }
      });
    },
    getDetails() {
      console.log("statistics:",params.value.id)
      getPullMessageDetail(params.value.id).then((res) => {
        if (res.code === 0) {
          $data.detail = { ...res.data };
          $data.special.dateRange = [res.data.sendAt,new Date().getUTCFullYear()];
        }
      });
    },
    onResetQuery() {
      $data.query = { ...backup.query };
      $fn.statistics();
    },
    onSubmit() {
      let pass = $fn.checkDateTime($data.special.dateRange);
      if(!pass){return;}
      let dr = $data.special.dateRange;
      if(dr && dr.length===2){
        $data.query.startAt = dr[0];
        $data.query.endAt = dr[1];
      }else{
        $data.query.startAt = "";
        $data.query.endAt = "";
      }
      $fn.statistics();
    },
    // 时间限制
    disabledDate: (time) => {
      return (time.getTime() < new Date($data.detail.sendAt).getTime() - 8.64e7) || (time.getTime() > new Date().getTime());
    },
    checkDateTime(time) {
      if(!time)return true;

      if (new Date(time[0]).getTime() < new Date($data.detail.sendAt).getTime() || new Date(time[1]).getTime() > Date.now()) {
        $data.special.dateRange = null;
        ElMessage.warning("筛选时间需大于推送时间并小于当前时间！");
        return false;
      }
      return true;
    },
  };

  return {
    $data,
    $fn,
  };
})();
function init(){
  detailFn.statistics();
  detailFn.getDetails();
}
init();

// 从相同路由进入（params不同，query.view相同），如/a/b/1?view=1 => /a/b/2?view=1
onBeforeRouteUpdate((to, from, next) => {
  if(to.params.id !== from.params.id && to.query.view === from.query.view){
    params.value.id = to.params.id;
    query.value = to.query;
    init();
  }
  next();
});

</script>

<style scoped lang="scss">
.panel {
  background-color: #ffffff;
  padding: 12px;
  border-radius: 8px;
}
.isEmpty{
  color: rgb(172, 172, 172);
}
</style>